<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <style type="text/css">
      body {
        background: #FFFFFF;
      }
      
      .title {
        padding: 15px;
        position: relative;
      }
      
      .title:before {
        content: '';
        display: block;
        width: 3px;
        height: 14px;
        position: absolute;
        left: 0;
        background: #3188FE;
        top: 50%;
        transform: translateY(-50%);
      }
      
      .list {
        padding: 15px;
        background: #F1F3F7;
        color: #686875;
        border-radius: 3px;
      }
      
      .list-item {
        margin-top: 15px;
      }
      
      .list-item:first-child {
        margin-top: 0;
      }
      
      .operation {
        display: flex;
        padding-top: 15px;
        justify-content: space-between;
      }
      
      .operation .btn {
        color: #3188FE;
      }
      
      .wplist {
        margin-bottom: 15px;
      }
    </style>
  </head>

  <body>
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">详情</h1>
    </header>
    <div class="mui-content bg-white page-wrap" id="container" v-cloak>
      <div class="page-scroll padding-lr">
        <div class="title">任务信息</div>
        <div class="list">
          <div class="list-item">
            设备：{{taskInfo.dn}}
          </div>
          <div class="list-item">
            厂商/规格/型号：{{taskInfo.v}}/{{taskInfo.m}}
          </div>
          <div class="list-item">
            位置编码：{{taskInfo.lc}}
          </div>
          <div class="list-item">
            位置描述：{{taskInfo.lc}}
          </div>
          <div class="list-item">
            检修任务：{{taskInfo.n}}
          </div>
          <div class="list-item">
            计划开始时间：{{formatDate(taskInfo.st, 'yyyy-MM-dd hh:mm')}}
          </div>
          <div class="list-item">
            计划结束时间：{{formatDate(taskInfo.et, 'yyyy-MM-dd hh:mm')}}
          </div>
        </div>

        <div class="title">工序信息</div>
        <div class="list wplist" v-for="(item, i) in wpList" :key="item.id">
          <div class="list-item">
            工序编号：{{item.c}}
          </div>
          <div class="list-item">
            作业项目：{{item.jp}}
          </div>
          <div class="list-item">
            作业方法：{{item.jm}}
          </div>
          <div class="list-item">
            作业标准：{{item.js}}
          </div>
          <div class="list-item">
            当前执行人：{{item.un}}
          </div>
          <div class="list-item operation border-top">
            <div>替换执行人</div>
            <div @tap="choose(item, i)"><span class="btn">{{item.userName? item.userName: '请选择'}}</span> <span class="mui-icon mui-icon-arrowright"></span> </div>
          </div>
        </div>
      </div>

      <div class="fixed-btn">
        <button type="button" class="mui-btn mui-btn-primary" @click="submit">提交</button>
      </div>
    </div>
    <script type="text/javascript" src="../../../js/mui.js"></script>
    <script type="text/javascript" src="../../../js/jquery-3.2.1.min.js"></script>
    <script src="../js/mkeyplus.base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      mui.init()

      if(window.plus) {
        plusready();
      } else {
        document.addEventListener('plusready', plusready, false);
      }

      function plusready() {
        var self = plus.webview.currentWebview();
        console.log(self.projectTaskId)
        vm.form.projectTaskId = self.projectTaskId
        vm.form.projectCategory = self.projectCategory
        vm.projectTaskWpId = self.projectTaskWpId
        vm.getDetail()
      }

      let vm = new Vue({
        el: "#container",
        data: {
          projectTaskWpId: null, //工序编号 通知里但工序使用
          form: {
            projectTaskId: null,
            projectCategory: 0,
          },
          taskInfo: {},
          wpList: [],
          chooseIndex: 0 //选择人员索引
        },
        created: function() {},
        methods: {
          getDetail() {
            plus.nativeUI.showWaiting('加载中')
            this.projectTaskWpId ? this.form.projectTaskWpId = this.projectTaskWpId : ''
            mui.baseApp.httpRequst('get', '/app/api/task/wp', this.form, (res) => {
              plus.nativeUI.closeWaiting()
              console.log(res)
              this.taskInfo = res.t
              res.l.forEach(item => {
                item.userId = ''
                item.userName = ''
              })
              this.wpList = res.l
            })
          },
          formatDate(tmp, fmt) {
            return mui.baseApp.formatDate(tmp, fmt)
          },
          choose(item, i) {
            this.chooseIndex = i
            mui.baseApp.openWindow('./choosePerson.html', {
              projectTaskId: this.form.projectTaskId
            })
          },
          submit() {
            let data = []
            
            this.wpList.forEach(item =>{
              if(item.userId) {
                data.push({
                  projectTaskWp: item.id,
                  userId: item.userId,
                  fullname: item.userName
                })
              }
            })
            console.log(data)
            if(data.length === 0) {
              mui.toast('请选择变更人')
              return
            }
             plus.nativeUI.showWaiting('提交中')
            mui.baseApp.httpRequst('post', '/app/api/project/execution/taskExecutorChange', {data},function(res){
              plus.nativeUI.closeWaiting()
              mui.toast("提交成功")
              mui.back()
            }, function(err) {
              plus.nativeUI.closeWaiting()
            })
          }
        },
      })

      window.addEventListener('person', function(event) {
        let data = event.detail
        vm.wpList[vm.chooseIndex].userId = data.ui
        vm.wpList[vm.chooseIndex].userName = data.un
      });
    </script>
  </body>

</html>